<template>
	<view class="content">
		<u-navbar :fixed="false" title="不合格评审" titleStyle="color:#fff;">
			<view class="u-nav-slot" slot="left">
				<view class="NavbarLeft">
					<!-- 回退按钮 -->
					<u-icon name="arrow-left" :duration="0" size="20" color="#fff" @click="GoBack"></u-icon>
				</view>
			</view>
			<view slot="right">
				<m-bubble type="list" :selectData="formMenus" position="right" topOpsotion="right" bgcRgba="#fff"
					color="#333" @selectFun="TapPopup">
					<u-icon name="more-dot-fill" color="#fff" class="moremenu"></u-icon>
				</m-bubble>
			</view>
		</u-navbar>

		<view class="MainBox">
			<u--form class="topForm" labelPosition="left" :model="formData" ref="uForm">

				<u-form-item labelWidth="100" label="单据日期" prop="BillDate" borderBottom>
					<u--input v-model="formData.BillDate" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="单据编号" prop="BillNO" borderBottom>
					<u--input v-model="formData.BillNO" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="来源信息" prop="InformationSource" borderBottom>
					<u--input v-model="formData.InformationSource" disabled disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="工单单号" prop="GDDH" borderBottom
					v-if="formData.InformationSourceID!=1 || formData.InformationSourceID!=10">
					<u--input v-model="formData.GDDH" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="品号" prop="ProductCode" borderBottom>
					<u--input v-model="formData.ProductCode" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="品名" prop="ProductName" borderBottom>
					<u--input v-model="formData.ProductName" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="100" label="规格" prop="ProductSpec" borderBottom>
					<u--input v-model="formData.ProductSpec" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="材质" prop="FMaterials" borderBottom>
					<u--input v-model="formData.FMaterials" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="检验数量" prop="Qty" borderBottom>
					<u--input v-model="formData.Qty" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="发起人" prop="UserName" borderBottom>
					<u--input v-model="formData.UserName" disabled disabledColor="#ffffff" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="责任供应商" prop="SupplyName" borderBottom
					v-if="formData.InformationSourceID==1 || formData.InformationSourceID==10"
					@click=" openBaseScreen('责任供应商','radio')">
					<u--input v-model="formData.SupplyName" placeholder="请选择责任供应商" readonly border="none"
						suffixIcon="arrow-right"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="抽检次数" prop="SamplingFrequency" borderBottom>
					<u--input v-model="formData.SamplingFrequency" disabled disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="100" label="抽样数量" prop="SamplingQuantity" borderBottom>
					<u--input v-model="formData.SamplingQuantity" disabled disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="抽样合格数量" prop="SampleHGNumber" borderBottom>
					<u--input v-model="formData.SampleHGNumber" disabled disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="抽样不合格数" prop="SampleBHGNumber" borderBottom>
					<u--input v-model="formData.SampleBHGNumber" disabled disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="来源检验单号" prop="TrackingNumber" borderBottom>
					<u--input v-model="formData.TrackingNumber" disabled disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="100" label="备注" prop="FRemarks" borderBottom>
					<u--input v-model="formData.FRemarks" placeholder="请输入备注" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="100" label="异常描述" prop="Comment" borderBottom>
					<u--input v-model="formData.Comment" placeholder="请输入异常描述" border="none"></u--input>
				</u-form-item>

			</u--form>

			<view class="BottomBox">
				<view class="SubBtn" v-if="approvalConfig.isEnableApproval && (!formData.Status || formData.Status==3)"
					@click="startApprove">发起审批</view>

				<view class="SubBtn" v-if="approvalConfig.isEnableApproval && formData.Status == 1 && isCurApproval"
					@click="formApprove">审批单据</view>

				<view class="SubBtn" v-if="approvalConfig.isEnableApproval && formData.Status == 1"
					@click="cancelApprove">撤销审批</view>

			</view>
		</view>
	</view>
</template>

<script>
	import ApprovalFuns from '@/common/comFun/QMS_ApprovalFun.js';

	var ApprovalFun = ApprovalFuns;

	import layerFun from '@/common/comFun/layerFun.js';
	var layer = layerFun;

	// 不合格评审
	export default {
		data() {
			return {
				BadReviewID: null,
				formData: {
					BillDate: null,
					BillNO: null,
					InformationSource: null,
					GDDH: null,
					ProductCode: null,
					ProductName: null,
					ProductSpec: null,
					FMaterials: null,
					Qty: null,
					UserName: null,
					SupplyName: null,
					SamplingFrequency: null,
					SamplingQuantity: null,
					SampleHGNumber: null,
					SampleBHGNumber: null,
					TrackingNumber: null,
					Comment: null,
					FRemarks: null,

					FormName: '不合格评审表单',
					Status: null,
				},

				keyName: 'BadReviewID',
				keyValue: '',
				physicalTableName: 'QC_BadReview',

				UserInfo: {},
				approvalConfig: {
					isEnableApproval: false
				},
				isCurApproval: false, // 判断是否为当前审批人
				ApprovalSort: null,
				globalData: {},
				isShowComApproval: false,

				approveObj: {},
				ApprovalID: null, // 审批ID

				formMenus: [{
					name: '查阅审批流',
					value: '',
					icon: 'search'
				}],
			};
		},
		onShow() {

			// 强制竖屏
			setTimeout(function() {
				plus.screen.lockOrientation('portrait-primary');
			}, 300)


		},
		onLoad: function(option) {
			var that = this;
			that.BadReviewID = option.id;
			setTimeout(() => {
				that.getPageInfo();
			}, 300)
		},
		mounted() {
			var that = this;
			uni.$on('ReviewPageInfo_Choice', function(ret) {
				if (ret.type == '责任供应商') {
					that.formData = Object.assign(that.formData, ret.data);
				}

			})
		},
		onUnload() { // 监听页面卸载,
			uni.$off('ReviewPageInfo_Choice')
		},
		methods: {
			TapPopup(data) {
				const {
					name
				} = data;
				const vm = this;

				switch (name) {
					case '查阅审批流': {
						ApprovalFun.viewListApprove(vm);
						break;
					}

					default:
						console.warn(`未处理的选项: ${name}`);
						break;
				}
			},
			openBaseScreen(str, type) { // 查找数据
				let that = this;
				let obj = null;
				let url = '/commonPage/Tool/baseScreen';
				switch (type) {
					case 'radio': // 单选项

						if (str == '责任供应商') {

							obj = {
								allowClear: false,
								cmd: 'getGYS_WO',
								type: str,
								ListeningName: 'ReviewPageInfo_Choice',
								// multiple: false,
								serverSearch: {
									isPaging: true, //是否分页
									searchKey: 'SupplyName', //搜索关键词，应包含在param中
									showText: 'SupplyName', //查询结果显示的字段
									pageIndexStr: 'Pageindex', //分页页码字段，应包含在param中
								},
								param: {
									SupplyName: '',
									Pageindex: 1,
									PageSize: 30
								}
							}

						}


						break;


					default:
						break;
				}



				if (!this.$utils.isEmpty(obj)) {

					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: obj
					})

					uni.navigateTo({
						url: url
					})
				}

			},
			getPageInfo() {
				var that = this;
				let vm = this;
				that.Request.request('APP_BHGPSMX', {
					BadReviewID: that.BadReviewID
				}, function(ret) {
					if (ret.status == 200) {
						if (ret.data.ds.length) {
							that.formData = Object.assign(that.formData, ret.data.ds[0]);
							console.log(that.formData)
							vm.keyName = ret.data.ds[0].keyName;
							vm.keyValue = ret.data.ds[0].keyValue;
							vm.physicalTableName = ret.data.ds[0].physicalTableName;
							ApprovalFun.getGlobalData(vm);
						} else {
							layer.alert('未找到单据数据，点击确定返回', () => {
								vm.GoBack();
							})
						}

					} else {
						layer.alert('未找到单据数据，点击确定返回', () => {
							vm.GoBack();
						})
					}
				});
			},
			// 审批流程按钮
			startApprove() { //判定是否启用审批流
				let vm = this;
				this.Request.request('APP_BHGPS_UPDATE', {
					BadReviewID: this.formData.BadReviewID,
					FSupplyID: this.formData.FSupplyID || 0,
					FRemarks: this.formData.FRemarks,
					Comment: this.formData.Comment,
				}, function(ret) {
					if (ret.status == 200) {
						if (ret.data.ds[0].status == 200) {
							ApprovalFun.startApprove(vm);
						} else {
							layer.msg(ret.data.ds[0].msg)
						}

					} else {
						layer.msg('请重试')
					}
				});

			},
			formApprove() { // 审批单据
				let vm = this;
				ApprovalFun.formApprove(vm);
			},
			cancelApprove() { // 撤销审批
				let vm = this;
				ApprovalFun.cancelApprove(vm);
			},
			GoBack() {
				uni.navigateBack()
			},
			post(sql, param, callBack) {
				param["sql"] = sql;
				if (this.Request.getUserInfo()) {
					if (!param.hasOwnProperty("P_UserID")) {
						param.P_UserID = this.Request.getUserInfo().UserID;
					}
					if (!param.hasOwnProperty("P_UserName")) {
						param.P_UserName = this.Request.getUserInfo().UserName;
					}
					if (!param.hasOwnProperty("P_UserCode")) {
						param.P_UserCode = this.Request.getUserInfo().UserCode;
					}
				}
				this.Request.requestByUrl("/SQLData/QuerySql", param, function(data) {
					callBack(data);
				}, function(err) {
					console.log(err)
				});
			},
			refreshPage() {
				var that = this;
				let vm = this;
				vm.getPageInfo();
			},
		},
	}
</script>

<style lang="scss">
	.content {
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height);
		display: flex;
		flex-direction: column;
		height: calc(100vh - 50px);
		background-color: #fff;

		.MainBox {
			padding: 0 15px;
			flex: 1;
			overflow: auto;

			.topForm {
				background-color: #fff;

				.u-form-item__body {
					padding: 4px 0 !important;

					.u-form-item__body__left__content__label {
						font-size: 12px !important;
					}

					.u-input__content__field-wrapper__field {
						font-size: 12px !important;
					}
				}
			}

			.BottomCard {
				margin-top: 20px;
				min-height: 200px;
				box-shadow: 1px 1px 13px -9px #333;
				background-color: #fff;
				border-radius: 8px;
				padding: 10px 15px;

				.CellBox {
					.leftBox {
						position: relative;
						width: 44px;
						height: 44px;
						background-color: #0788ea;
						border-radius: 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
						color: #fff;
						text-align: center;
					}

					.statusType {
						position: absolute;
						right: -4px;
						bottom: -4px;
						width: 20px;
						height: 20px;
						border-radius: 999999px;
						background-color: #fff;
						padding: 2px;
					}

					.line {
						display: inline-block;
						background: #d6d6d6;
						position: absolute;
						top: 52px;
						left: 50%;
						transform: translateX(-50%);
						width: 3px;
						height: 24px;
						z-index: 2;
					}
				}

				.CardTop {
					margin-bottom: 26px;
				}

				.CardMainBox {
					margin-bottom: 10px;
				}

				.ApproveClass {
					color: #999;
				}

				.successApprove {
					color: #36c601 !important;
				}
			}
		}

		.BottomBox {
			padding: 10px 15px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 100%;

			.SubBtn {
				// width: 40%;
				min-width: 140px;
				width: fit-content;
				padding: 10px 15px;
				background-color: #51d0d0;
				color: #fff;
				border-radius: 12px;
				text-align: center;
				margin-left: 4px;
			}
		}
	}

	.BottomBox {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 50px;
	}
</style>